<template>
  <a-layout class="m-layout">
    <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
      <!-- <a-layout-sider
      :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, top: 0, bottom: 0 }"
    > -->
      <div class="logo">
        <img class="b-logo" src="/public/BorschLubeLogo.png" alt="">
      </div>
      <div class="m-scroll-container">
        <a-menu v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" mode="inline" theme="dark"
          :inline-collapsed="collapsed" @click="handleClickMenu">
          <template v-for="item in menuList" :key="item.key">
            <template v-if="!item.children">
              <a-menu-item :key="item.key">
                <template #icon v-if="item.icon">
                  <MenuIcon :icon="item.icon" />
                </template>
                {{ item.title }}
              </a-menu-item>
            </template>
            <template v-else>
              <sub-menu :key="item.key" :menu-info="item" />
            </template>
          </template>
        </a-menu>
      </div>
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="m-layout-header">
        <a-row class="m-layout-header-top" align="middle" type="flex">
          <a-col>
            <MenuUnfoldOutlined class="trigger" v-if="collapsed" @click="() => (collapsed = !collapsed)" />
            <MenuFoldOutlined class="trigger" v-else @click="() => (collapsed = !collapsed)" />
          </a-col>
          <a-col>
            <CurrentPosition />
          </a-col>
          <a-col flex="auto">
            <a-row justify="end">
              <a-col>
                <UserDropdown />
              </a-col>
            </a-row>
          </a-col>
        </a-row>
        <a-row class="m-layout-header-nav" align="middle" type="flex">
          <a-col class="m-layout-tabs">
            <MTabs />
          </a-col>
        </a-row>
      </a-layout-header>
      <a-layout-content>
        <div class="m-content-scroll-container">
          <router-view />
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue';
import { MenuUnfoldOutlined, MenuFoldOutlined, PieChartOutlined } from '@ant-design/icons-vue'
import { useMenuStore } from '../store/modules/menu';
import { useTabStore } from '../store/modules/tab';

import SubMenu from './SubMenu.vue';
import MenuIcon from './MenuIcon.vue';
import CurrentPosition from './CurrentPosition.vue';
import UserDropdown from './UserDropdown.vue';
import MTabs from './Tabs.vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()
const collapsed = ref<boolean>(false);
const openKeys = ref<string[]>([]);
const selectedKeys = ref<string[]>([]);
const menuStore = useMenuStore()
const tabStore = useTabStore()
const menuList = computed(() => {
  return menuStore.menuList
})
const handleClickMenu = (e: any) => {
  router.push({
    name: e.key
  }).then(() => {
    tabStore.addTab(router.currentRoute.value)
  })
}

onMounted(() => {
  if (route.name) {
    selectedKeys.value = [route.name.toString()]
    let node = menuStore.getMenu(route.name.toString())
    openKeys.value = node?.parentKeys || []
  }
  tabStore.addTab(router.currentRoute.value)
  console.log('menuList', menuList);
  console.log('tabStore', tabStore);

})
</script>
<style lang="less">
.m-layout .trigger {
  padding: 0 10px;
  cursor: pointer;

}

.m-layout .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.3);
  margin: 16px;

  // position: absolute;
  .b-logo {
    width: 60px;

  }
}

.site-layout .site-layout-background {
  background: #fff;
}

.m-layout {
  display: flex;
  width: 100%;
  min-height: 100%;
  max-height: 100%;
  background-color: #f4f7f9;
  position: relative;
  flex-direction: column;

  .m-layout-header {
    background: #fff;
    padding: 0;
    height: 102px;

    .m-layout-header-top {
      height: 64px;
    }
  }

  .ant-layout-sider {
    // position: absolute;
    // position: fixed;
  }

  .ant-layout-sider-children {
    display: flex;
    flex-direction: column;
    height: 100vh;

    // position:absolute;
    // position: fixed;
    .m-scroll-container {
      flex: auto;
      overflow-x: auto;
      overflow-y: auto;

    }

    .m-scroll-container::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    .m-scroll-container::-webkit-scrollbar-track {
      width: 6px;
      height: 6px;
    }

    .m-scroll-container::-webkit-scrollbar-thumb {
      width: 6px;
      height: 6px;
      box-shadow: 6px 6px 6px 6px #ffffff88;
    }
  }

  .ant-layout-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
    height: auto;
    /* 确保高度是自适应的 */
    overflow: visible;

    /* 确保没有设置为 scroll 或 auto */
    .m-content-scroll-container {
      flex: auto;
      overflow-x: auto;
      overflow-y: auto;
      // position: absolute;
    }

    .m-content-scroll-container::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    .m-content-scroll-container::-webkit-scrollbar-track {
      width: 6px;
      height: 6px;
    }

    .m-content-scroll-container::-webkit-scrollbar-thumb {
      width: 6px;
      height: 6px;
      background-color: #CACBCD;
    }
  }
}
</style>
